<template>
    <el-container class="home_container">
        <!-- 头部 -->
    <el-header>
        <div class="nav">
            <img src="../assets/img/logo.png" alt="">
            <span>房屋销售后台管理系统</span>
        </div>
        <el-button type="info" class="loginOut" @click="loginOut">退出</el-button>
    </el-header>
    <!-- 页面主体 -->
    <el-container>
        <!-- 则边栏 -->
        <el-aside width="200px">
        <el-menu
        background-color="#444444"
        text-color="rgb(56, 163, 119)"
        active-text-color="#ffd04b" router default-active = '/SystemHomePage'>
            <el-menu-item  :index='"/"+"SystemHomePage"' >
                <i class="el-icon-star-on"></i>
                <span slot="title">系统首页</span>
            </el-menu-item>
             <el-menu-item :index='"/"+"HousingInformation"'>
                <i class="el-icon-s-home"></i>
                <span slot="title">房屋信息</span>
            </el-menu-item>
             <el-menu-item :index='"/"+"AnnouncementInformation"' >
                <i class="el-icon-s-promotion"></i>
                <span slot="title">通告信息</span>
            </el-menu-item>
            <el-submenu index="3" >
                <template slot="title">
                    <i class="el-icon-share"></i>
                    <span>在线帮助</span>
                </template>
                <el-menu-item :index='"/"+"UserQuestions"'> <i class="el-icon-question"></i>用户提问</el-menu-item>
            </el-submenu>
            <el-submenu index="4">
                <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span>管理员管理</span>
                </template>
                <el-menu-item :index='"/"+"HousingInformationManagement"'> <i class="el-icon-s-shop"></i>房屋信息管理</el-menu-item>
                <el-menu-item :index='"/"+"AdvanceOrderManagement"'> <i class="el-icon-notebook-2"></i>预订单管理</el-menu-item>
                <el-menu-item :index='"/"+"OnlineHelpManagement"'> <i class="el-icon-service"></i>在线帮助管理</el-menu-item>
                <el-menu-item :index='"/"+"AdministratorInformation"'> <i class="el-icon-medal-1"></i>管理员信息</el-menu-item>
            </el-submenu>
            <el-menu-item :index='"/"+"SearchFunction"'>
                <i class="el-icon-zoom-in"></i>
                <span slot="title">搜索功能</span>
            </el-menu-item>
        </el-menu>
        </el-aside>
        <!-- 内容主体 -->
        <el-main>
            <router-view></router-view>
        </el-main>
    </el-container>
    </el-container>
</template>
<script>
export default {
    methods: {
        //退出功能
        loginOut(){
            window.sessionStorage.clear()
            this.$router.push('/login'),
            this.$Message.success(`您已退出成功`)
        }
    },
}
</script>
<style  scoped>
    .el-header{
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: space-between;
        align-items: center;
        color: #fff;
        
    }
    .nav{
        display: flex;
        align-items: center;
        font-size: 20px;
    }
    .nav img{
        width: 35%;
        height: 100%;
    }
    .nav span{
        padding-left: 5%;
    }
    .el-aside{
         background-color:  rgb(95, 105, 95);
    }
    .el-main{
        background-color:  #e7f1ed;
    }
    .home_container{
        height: 100%;;
    }
    .loginOut{
        display: flex;
        justify-content: end;
    }
</style>